// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.daily-challenge {
  background: hsl(var(--hsl-b4));
  border-radius: @border-radius-large;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  padding: 1px;
  border: 2px solid transparent;

  &--played-today {
    border-color: @osu-colour-lime-1;

    &::before {
      .fas();
      .center-content();
      background-color: @osu-colour-lime-1;
      border-radius: 50%;
      color: @osu-colour-b6;
      content: @fa-var-check;
      font-size: 8px; // icon size
      height: 16px;
      position: absolute;
      right: 0;
      top: 0;
      transform: translate(50%, -50%);
      width: $height;
    }
  }

  &__name {
    font-size: @font-size--normal;
    padding: 0 5px;
  }

  &__value {
    .fancy-text(var(--colour));
    --colour: hsl(var(--hsl-c2));
  }

  &__value-box {
    border-radius: @border-radius-small;
    background: hsl(var(--hsl-b6));
    padding: 5px 10px;
  }
}
